<template>
  {{userInfo?.userName}}
  {{userInfo?.realName}}
  <button v-if="userStore.hasPerm('sys:role')">权限测试</button>
  <div>
    <button v-perm="'sys:user'">用户列表</button>
  </div>
  <div>
    <button v-perm="'sys:user:save'">添加列表</button>
  </div>
  <div>
    <button v-perm="'sys:user:remove'">删除列表</button>
  </div>
  <button @click="handleLogout">退出</button>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore()
const router = useRouter()
/**
 * 退出处理
 */
const handleLogout = () =>{
  userStore.logout().then(()=>{
    router.push({
      name: 'login'
    })
  })
}
const userInfo = computed(()=>{
  return userStore.$state.userInfo
})
</script>